<template>
  <div class="swiper-comp" :style="styleStr">
    <swiper class="swiper-main" ref="mySwiper" :options="swiperOptions">
      <template v-if="slotList.length">
        <swiper-slide
          class="swiper-item"
          v-for="(item, index) in slotList"
          :key="index">
          <slot :name="`swiperItem-${index}`"></slot>
        </swiper-slide>
      </template>
      <swiper-slide
        v-else
        v-for="(item, index) in data"
        :key="index"
        class="swiper-item"
        @click.native="handleClick(item, $event)">
        <img class="swiper-img" :src="item.image" />
      </swiper-slide>
      <div v-show="hasShowpagination" class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';

export default {
  name: 'swiperComp',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    styleStr: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true,
        autoplay: true,
        speed: 1000,
        ...this.options
      }
    };
  },
  computed: {
    hasShowpagination() {
      return this.slotList.length || this.data.length;
    },
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    slotList() {
      if (this.$checkType(this.$slots) === 'object') {
        const result = [];
        Object.keys(this.$slots).forEach(key => {
          key.includes('swiperItem-') && result.push(this.$slots[key]);
        });
        return result;
      }
      return [];
    }
  },
  watch: {
    slotList: {
      immediate: true,
      deep: true,
      handler: function (list) {
        const hasLoop = list.length > 1;
        this.swiperOptions.autoplay = hasLoop;
        this.swiperOptions.loop = hasLoop;
      }
    }
  },
  mounted() {
    this.init();
  },
  components: {
    Swiper,
    SwiperSlide
  },
  methods: {
    init() {
      this.swiper.el.onmouseover = () => {
        this.swiper.autoplay.stop();
      };
      // 鼠标离开开始自动切换
      this.swiper.el.onmouseout = () => {
        this.swiper.autoplay.start();
      };
    },
    /**
     * 当前轮播项点击事件
     * @param data: 当前项数据
     * @param e: 事件对象
     */
    handleClick(data, e) {
      this.$emit('current-click', data, e);
    }
  }
};
</script>

<style scoped lang="scss">
.swiper-comp {
  height: 100%;
  width: 100%;
  > .swiper-main {
    width: 100%;
    height: 100%;
    .swiper-item {
      width: 100%;
      height: 100%;
      .swiper-img {
        width: 100%;
        height: 100%;
      }
    }
    /deep/ .swiper-pagination {
      bottom: 0;
      .swiper-pagination-bullet-active {
        background: #fff;
        width: 15px;
        border-radius: 10px;
      }
    }
  }
  div[class*=swiper-button] {
    cursor: pointer;
    outline: none;
  }
}
</style>
